"use client"

import { useState, useEffect } from "react"
import { CategoryFilter } from "@/components/filters/category-filter"
import {getArtistGenres} from "@/lib/api-client";


interface ArtistCategoriesProps {
    selectedGenreId: string | number | null
    onGenreChange: (genreId: string | number | null) => void
}

export function ArtisCategories({ selectedGenreId, onGenreChange }: ArtistCategoriesProps) {
    const [genres, setGenres] = useState<{ id: number; name: string }[]>([])
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchGenres = async () => {
            try {
                setIsLoading(true)
                const response = await getArtistGenres()

                if (response.success) {
                    setGenres(response.data.genres || [])
                }
            } catch (error) {
                console.error("获取歌手分类失败:", error)
            } finally {
                setIsLoading(false)
            }
        }

        fetchGenres()
    }, [])

    if (isLoading) {
        return (
            <div className="animate-pulse">
                <div className="flex flex-wrap gap-2">
                    {[...Array(6)].map((_, index) => (
                        <div key={index} className="h-8 w-16 bg-muted rounded-full"></div>
                    ))}
                </div>
            </div>
        )
    }

    return <CategoryFilter categories={genres} selectedId={selectedGenreId} onChange={onGenreChange} />
}

